切版前的準備工作：格式設定與注意事項

切版（也就是將設計稿轉成網頁）前，我們常常會急著開工，但先做好基本設定，可以省下日後許多麻煩。以下是幾個重要的步驟與觀念：

1. 設定 CSS Reset

不同瀏覽器預設的樣式不太一樣，像是 h1 的字體大小或 ul 有預設的縮排。這會導致在不同瀏覽器中看到的畫面不一致。
解法： 在開始切版前使用簡單的 CSS Reset。

2.規劃版面尺寸與字體大小

設定整體的寬度（如最大寬度為 1200px）、基本的字體大小與行高，可以幫助整體看起來一致。也方便做 RWD（響應式設計）。

✅ 建議：

-使用 rem 或 % 來設計，這樣更彈性

-body 設定字體大小： font-size: 16px; line-height: 1.5;面尺寸與字體大小

3. 預先規劃命名規則（BEM、CamelCase）

寫 CSS 或 SCSS 時，如果每個 class 名都隨意命名，很容易混亂。事先決定一套命名規則，可以讓團隊合作更順利。

✅ 例子（BEM 命名）：

HTML
<div class="card card--highlight">
  <h2 class="card__title">標題</h2>
</div>

4. 使用預處理器或 CSS 架構工具

如 SCSS、PostCSS、Tailwind 等，可以讓我們寫得更有效率。這些工具在開工前就要先安裝與設定好，避免中途切換浪費時間。

結語

「磨刀不誤砍柴工」，這句話套在切版上也很適合。雖然一開始做這些準備可能會覺得慢，但長期來看，它能幫你節省更多時間，減少錯誤，也讓團隊更容易協作。每個前端工程師都應該養成這個好習慣！

如果你剛開始學切版，不妨在每次開案前，問自己：基本格式我都設定好了嗎？